<script setup>
import FundList from "./fund/FundList.vue";
import {ref} from "vue";
import Bond from "./fund/Bond.vue";

const tabActive = ref(1)
const changeTab = (index)=>{
  tabActive.value = index
}
</script>

<template>
  <div class="tabs-box">
    <p class="tabs">
      <span :class="{active: tabActive === 1}" @click="changeTab(1)">平台收入</span>
      <span :class="{active: tabActive === 2}" @click="changeTab(2)">店铺保证金</span>
    </p>
  </div>
  <div>
    <FundList v-if="tabActive === 1"/>
    <Bond v-if="tabActive === 2"/>
  </div>
</template>

<style scoped lang="scss">
.tabs-box{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
  margin-bottom: 24px;
  .tabs{
    display: flex;
    align-items: center;
    span{
      margin-right: 40px;
      cursor: pointer;
      &.active{
        color: #1DBF73;
        font-weight: bold;
        position: relative;
        &:after{
          content: '';
          display: block;
          width: 100%;
          height: 2px;
          background: #1DBF73;
          position: absolute;
          bottom: -12px;
          left: 0;
        }
      }
    }
  }
  a{
    width: 108px;
    height: 36px;
    background: #1DBF73;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    line-height: 36px;
    color: #fff;
    text-decoration: none;
  }
}

</style>